<template>
  <div>
    <input type="file" @change="onFileChange" />
    <img :src="convertedImage" alt="Converted Image" v-if="convertedImage" />
  </div>
</template>
<script>
export default {
  data() {
    return { image: null, convertedImage: null };
  },
  methods: {
    onFileChange(event) {
      const file = event.target.files[0];
      if (file && file.type === "image/png") {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.image = new Image();
          this.image.src = e.target.result;
          this.image.onload = () => {
            const canvas = document.createElement("canvas");
            const ctx = canvas.getContext("2d");
            canvas.width = this.image.width;
            canvas.height = this.image.height;
            ctx.fillStyle = "white";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(this.image, 0, 0);
            this.convertedImage = canvas.toDataURL("image/jpeg");
          };
        };
        reader.readAsDataURL(file);
      }
    },
  },
};
</script>
